import React, { Component } from 'react';
import { Button, Select, Input, DatePicker, Modal, message } from 'antd';
import Export from '../../components/export';
import { columns } from './table';
import { dayToMoment } from '../../components/dateRange';
import PermissionControl from '../../components/permissionControl';

const Option = Select.Option;
const { RangePicker } = DatePicker;

const styles = {
  main: {
    margin: '1em 0'
  },
  bv: {
    float: 'right'
  },
  select: {
    width: '10em'
  },
  rp: {
    display: 'inline-block',
    width: '200px',
    paddingLeft: '10px'
  },
  input: {
    width: '10em',
    margin: '0 1em'
  },
  but: {
    marginRight: '1em'
  },
  s: {
    marginTop: '1em',
    height: '28px'
  },
  dr: {
    display: 'inline-block',
    paddingLeft: '1em',
    paddingRight: '1em'
  }
};

const options = [
  { name: '产品名称', value: '1' },
  { name: 'IMEI', value: '2' },
  { name: '测试人员', value: '3' }
];
const optionsK = [
  { name: '全部', value: '3' },
  { name: '不通过', value: '0' },
  { name: '通过', value: '1' }
];

class Filter extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      modalVisible: false,
      type: '1',
      condition: '',
      dateRange: dayToMoment(30),
      result: '3'
    };
  }

  componentWillMount() {
    this.search();
  }

  componentWillReceiveProps = (nextProps) => {
    const { productKey: productKeyN } = nextProps;
    const { productKey } = this.props;
    if (productKeyN !== productKey) {
      this.search(productKeyN);
    }
  };

  getQueryData(productKeyN = null) {
    const { type, condition, result, dateRange } = this.state;
    const { productKey } = this.props;
    return {
      type: parseInt(type),
      condition,
      result: parseInt(result),
      startTime: dateRange[0] ? dateRange[0].format('YYYY-MM-DD HH:mm:ss') : '',
      endTime: dateRange[1] ? dateRange[1].format('YYYY-MM-DD HH:mm:ss') : '',
      productKey: productKeyN || productKey,
    };
  }

  typeChange = type => {
    this.setState({ type });
  }
  resultChange = result => {
    this.setState({ result });
  }

  change = e => {
    this.setState({ condition: e.target.value });
  }

  dateChange = value => {
    this.setState({
      dateRange: value && value.length > 1 ? [value[0].startOf('day'), value[1].endOf('day')] : value
    });
  }

  search = (productKeyN = null) => {
    // 收集参数，调用上层
    this.props.query(this.getQueryData(productKeyN));
  }

  reset = () => {
    // 清理参数，调用上层
    this.setState({
      type: '1',
      condition: '',
      dateRange: [],
      result: '3'
    }, this.search);
  }

  render() {
    const { type, condition, dateRange, result } = this.state;
    const { keys, exportTitle, currentCol } = this.props;
    return (
      <div style={styles.main}>
        <div>
          <Select style={styles.select} value={type} onChange={this.typeChange}>
            {options.map(o => <Option value={o.value}>{o.name}</Option>)}
          </Select>
          <Input placeholder="输入关键字" style={styles.input} value={condition} onChange={this.change} />
          测试状态：<Select style={styles.select} value={result} onChange={this.resultChange}>
          {optionsK.map(o => <Option value={o.value}>{o.name}</Option>)}
        </Select>
          {/*<div style={styles.dr} >*/}
            {/*<DateRange value={dateRange} onChange={v => this.dateChange({ dateRange: v })} defaultRange={[7, 30]} />*/}
          {/*</div>*/}
          <RangePicker
            style={styles.rp}
            onChange={this.dateChange}
            value={dateRange}
          />
          <div style={styles.bv}>
            <Button
              type="primary"
              style={styles.but}
              onClick={() => { this.search(); }}
              icon="search"
              className="search"
            >搜索</Button>
            <Button onClick={this.reset} icon="sync">重置</Button>
          </div>
        </div>
        <div style={styles.s}>
          <div style={styles.bv}>
            <Export
              columns={currentCol}
              title={exportTitle}
              queryData={this.getQueryData()}
              ids={keys}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default Filter;
